<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>活动排行</title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
		<script src="{$staticHost}/static/js/js.js"></script>
		<script src="{$staticHost}/static/js/mod.js"></script>
		<script src="{$staticHost}/static/js/iscroll.js"></script>
		<script src="{$staticHost}/static/js/pullToRefresh.js"></script>
	</head>
		<style type="text/css">
		.dropload-up,.dropload-down{
	    position: relative;
	    height: 0;
	    overflow: hidden;
	    font-size: 12px;
	    /* 开启硬件加速 */
	    -webkit-transform:translateZ(0);
	    transform:translateZ(0);
	}
	.dropload-down{
	    height: 50px;
	}
	.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
	    height: 50px;
	    line-height: 50px;
	    text-align: center;
	}
	.dropload-load .loading{
	    display: inline-block;
	    height: 15px;
	    width: 15px;
	    border-radius: 100%;
	    margin: 6px;
	    border: 2px solid #666;
	    border-bottom-color: transparent;
	    vertical-align: middle;
	    -webkit-animation: rotate 0.75s linear infinite;
	    animation: rotate 0.75s linear infinite;
	}
	@-webkit-keyframes rotate {
	    0% {
	        -webkit-transform: rotate(0deg);
	    }
	    50% {
	        -webkit-transform: rotate(180deg);
	    }
	    100% {
	        -webkit-transform: rotate(360deg);
	    }
	}
	@keyframes rotate {
	    0% {
	        transform: rotate(0deg);
	    }
	    50% {
	        transform: rotate(180deg);
	    }
	    100% {
	        transform: rotate(360deg);
	    }
	}
	.zs { position: fixed; background: #fff; z-index: 20; width: 100%;top: 0 }
	#con-box { top: 37px }
	#banner { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; background: #fff; }
	/*#jz*/ {padding-top: 105px}
</style>
	<body>
		<section id="con-box">
			<article id="banner"></article>
			<div id="wrapper">
				<ul id="waplist" class="list-01"></ul>
			</div>
			
		</section>
		<script id="test" type="text/html">
			<%if(curUser.uid != undefined){%>
			<div  class="banner-time">
				<h2>竞赛英雄榜</h2>
				<div class="pb10">
					<%if(type==2){%>
					<div class="img">
						<% if (curUser.header.length>0){%>
							<img src="<%= curUser.header%>" />
						<%}%>
						<% if ( curUser.header.length==0){%>
							<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
						<%}%>
						我
					</div>
					<ul>
						<li>
							<span>今日里程</span>
							<span>累积打卡</span>
						</li>
						<li>
							<span><%= curUser.mileage%>km</span>
							<span><%= curUser.total_day%>天</span>
						</li>
						<li><%=curUser.content%></li>
					</ul>

					
					<%}%>
					<!--打卡-->
					<%if( type==1){%>
					<div class="img">
						<% if (curUser.header.length>0){%>
							<img src="<%= curUser.header%>" />
						<%}%>
						<% if ( curUser.header.length==0){%>
							<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
						<%}%>
						第<%=curUser.rank%>名
					</div>
					<ul>
						<li>
							<span>累积运动</span>
							<span>累积里程</span>
						</li>
						<li>
							<span><%= curUser.total_day%>天</span>
							<span><b><%= curUser.mileage%>km</b></span>
						</li>
						<li>
							<%= curUser.content%>
						</li>
					</ul>
					
					<%}%>
					<!--累积里程-->
				</div>
			</div>
			
			<%}%>
			<%if(type==2){%>
			<h3 class="rank-title">
				<span>今日里程</span>
				<span>累计打卡</span>
			</h3>
			<%}%>
			<%if(type==1){%>
			<h3 class="rank-title">
				<span>累积运动</span>
				<span>累积里程</span>
			</h3>
			<%}%>
		</script>
		<!-- 当前用户-->

		<script id="wap-list" type="text/html">
		<%if( type==2){%>
			<%for(var i=0;i< members.length; i++) {%>
			<li>
				<span>
					<% if ( members[i] .header.length>0){%>
					<img src="<%= members[i].header%>" />
					<%}%>
					<% if ( members[i] .header.length==0){%>
						<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
					<%}%>
				</span>
				<span><%= members[i].nickname %></span>
				<span><%= members[i].mileage%>km</span>
				<span><b><%= members[i].total_day%>天</b></span>
			</li>
			<%}%>
		<%}%>
		<!--打卡-->
		<%if( type==1){%>
			<%for(var i=0;i< members.length; i++) {%>
			<li>
				<span>
					<% if ( members[i].header.length>0){%>
					<img src="<%= members[i].header%>" />
					<%}%>
					<% if ( members[i].header.length==0){%>
						<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
					<%}%>
					<% if ( members[i].rank==1){%>
					<i class="ico-crown-2"></i>
					<%}%>
					<% if ( members[i].rank==2){%>
					<i class="ico-crowny-2"></i>
					<%}%>
					<% if ( members[i].rank==3){%>
					<i class="ico-crownt-2"></i>
					<%}%>
				</span>
				<span><%= members[i].nickname%></span>
				<span><%= members[i].total_day%>天</span>
				<span><b><%= members[i].mileage%>km</b></span>
				<em><%= members[i].rank%></em>
			</li>
			<%}%>
		<%}%>
		<!--累积里程-->
	</script>
	</body>
	<script>
		var gid = "{$gid}";
		var aid = "{$aid}";
		var id =0;
		var time = new Date(new Date().getTime());
		time = (time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes());
		var downTime = new Date(new Date().getTime());
		downTime = (downTime.getFullYear()+"-"+(downTime.getMonth()+1)+"-"+downTime.getDate()+" "+downTime.getHours()+":"+downTime.getMinutes());
		$(function(){
			Load()
			$.getJSON('{$staticHost}/groupWeb/statist',{aid:aid,gid:gid,id:0 }, function(data, error) {
				console.log(data)
				if(data.type==1){
					$("#wrapper").addClass("rank-mileage")
				}
				var html = template('test', data);

				if(typeof data.members == 'undefined') {
					return;
				}
				document.getElementById('banner').innerHTML = html;
				if(data.curUser.uid != undefined){
					$("#wrapper").css("padding-top","201px")
				}else{
					$("#wrapper").css("padding-top","41px")
				}
		});
	});		
	
	var counter = 0;
	    var num = 0;
	    var pageStart = 0,pageEnd = 0;
		var generatedCount = 0;
		var lis = $("#group li")
		function Load(){
			$('#wrapper').dropload({
			    scrollArea : window,
			    loadDownFn : function(me){
			    	$.ajax({
			           type: 'GET',
						url: '{$staticHost}/groupWeb/statist',
						dataType: 'json',
						data:{aid:aid,gid:gid,id:id},
			            success: function(data){
			            	console.log(data);
			                var result = '';
			                counter++;
			                pageEnd = num * counter;
			                pageStart = pageEnd - num;
			                if(typeof data.members == 'undefined') {
								$(".pullUpLabel").html("已加载完毕");
								return;
							}
							if(data.members.length>0) {
								// id += data.members.length-1;
								var item = data.members;
								id = data.members[data.members.length-1].uid;
								var html = template('wap-list', data);
								$('#waplist').append(html);
				            }else{
				            	$('.pullUpLabel').html("已加载完毕");
				            	me.noData();me.lock();
				            } 
			                // 为了测试，延迟1秒加载
			                me.noData();
			                me.resetload();
			                
			            },
			            error: function(xhr, type){
			                alert('Ajax error!');
			                // 即使加载出错，也得重置
			                me.resetload();
			            }
			        });
			    }
			});	
		}		
		/***加载数据***/
	</script>
	<script src="{$staticHost}/static/js/dropload.js"></script>	
{template 'show/web-footer'}